<template>
	<view>
		
		<u-navbar :title="NavTitle" back-icon-color="#333333" title-color="#333333" :immersive="true" :is-back="true" :background="background" :border-bottom="false"></u-navbar>
			
		<view class="me-top-wrap">
			<image class="top-bg" :src="BestImgUrl+'/Certification/rztopbg.png'"></image>
			<view class="my_info_wrap">
				<view class="top-info-box">
					<view class="my-info u-flex">
						<image class="my-tx" :src="userInfo.avatar"></image>
						<view class="my-name">
							<view>{{userInfo.nickname || '暂无昵称'}}</view>
							<view class="u-flex"><text>ID: {{userInfo.id}}</text><!-- <text>粉丝数：32653</text> --></view>
						</view>
						<view class="right-icon">
							<image mode="widthFix" :src="MyLevelData.image"></image>
						</view>
					</view>
				</view>
				<view class="gongju_lan">
					<view class="order_gjl">
						<view class="order_gjl_box">
							<view class="order_gjl_title u-flex">
								<view>已认证平台</view>
							</view>
							<view class="gongju_menu u-flex" v-if="Yirenzhenglist.length != 0">
								<view class="gongju_menu_item" v-for="(item,index) in Yirenzhenglist" :key="index" @click="clickWeiRenyrz(item,index)">
									<image :src="item.platform.platform_icon"></image>
									<view>{{item.platform.platform_name}}</view>
								</view>
							</view>
							<view v-else>
								<u-empty text="暂无认证平台" mode="favor" icon-size="66"></u-empty>
							</view>
						</view>
					</view>
				</view>
				<view class="gongju_lan">
					<view class="order_gjl">
						<view class="order_gjl_box">
							<view class="order_gjl_title u-flex">
								<view>未认证平台</view>
							</view>
							<view class="gongju_menu u-flex" v-if="WeiRenZhengList.length != 0">
								<view class="gongju_menu_item" v-for="(item,index) in WeiRenZhengList" :key="index" @click="clickWeiRen(item,index)">
									<image :src="item.platform_icon"></image>
									<view>{{item.platform_name}}</view>
								</view>
							</view>
							<view v-else>
								<u-empty text="你已经完成全部认证啦" mode="favor" icon-size="66"></u-empty>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="center_wrap">
			<view class="drjs_box">
				<image class="drjs_title" :src="BestImgUrl+'/Certification/djjs.png'"></image>
				<!-- <image class="jsbiag" mode="widthFix" :src="BestImgUrl+'/Certification/Group 34829.png'"></image> -->
				<view>
					<u-table>
						<u-tr>
							<u-th>达人等级</u-th>
							<u-th>达人名称</u-th>
							<u-th>探店权益</u-th>
						</u-tr>
						<u-tr v-for="(item,index) in dengJIlist" :key="index">
							<u-td style="font-size: 24rpx;">V{{item.vip_level}}</u-td>
							<u-td>{{item.name}}</u-td>
							<u-td><text style="color: #FF4910;">返利{{item.ratio}}%</text></u-td>
						</u-tr>
						<!-- <u-tr>
							<u-td style="font-size: 24rpx;">V1</u-td>
							<u-td>4元</u-td>
							<u-td>3元</u-td>
						</u-tr>
						<u-tr>
							<u-td style="font-size: 24rpx;">V1</u-td>
							<u-td>1元</u-td>
							<u-td>2元</u-td>
						</u-tr> -->
					</u-table>
				</view>
				<view class="jieshao">
					<image :src="BestImgUrl+'/Certification/image 853.png'"></image>
					<view class="jswa">
						<text>粉丝数量指已认证平台所有粉丝数量之和，可不定期更新认证平台，进行达人升级喔</text>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				BestImgUrl: app.globalData.imgurl,
				background: {
					backgroundColor: 'transparent',
				},
				NavTitle: '达人认证',
				userInfo: {},
				WeiRenZhengList: [],
				Yirenzhenglist: [],
				MyLevelData: {
					id: 0,
					image: "",
					name: "",
					ratio: 0,
					vip_level: 0
				},
				LaiYuan: 0,
				guizeInfo: "",
				dengJIlist: []
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 1) {
				this.background.backgroundColor = '#f8d000'
				this.NavTitle = '达人认证'
			} else {
				this.background.backgroundColor = 'transparent'
				this.NavTitle = ''
			}
		},
		onLoad(ops) {
			
			let laiyuan = ops.LaiYuan
			if(laiyuan && laiyuan == 1){
				this.LaiYuan = laiyuan
			}
			
			this.GetUserInfo()
			this.myweirenzhenglist()
			this.myrenzhenglist()
		},
		methods: {
			myrenzhenglist(){
				let that = this
				that.$api.MyuserCertifiedlist({
							
				}).then(res => {
					console.log('我的认证列表', res.data.result);
					that.Yirenzhenglist = res.data.result
				}).catch(err => {})
			},
			myweirenzhenglist(){
				let that = this
				that.$api.notCertifiedPlatform({
							
				}).then(res => {
					console.log('未认证列表', res.data.result);
					this.WeiRenZhengList = res.data.result
				}).catch(err => {})
			},
			GetUserInfo() {
				let that = this
				that.$api.GetuserInfo({
			
				}).then(res => {
					console.log('个人信息', res.data.result);
					this.userInfo = res.data.result
					this.getDarenList()
				}).catch(err => {})
			},
			getDarenList(){
				let that = this
				that.$api.GetVipMenbers({
							
				}).then(res => {
					console.log('达人等级列表',res.data.result)
					that.dengJIlist = res.data.result
					//查询个人是哪个等级
					let myLeve = that.userInfo.vip_level
					let myLevelData = {}
					if(myLeve == 0){
						that.MyLevelData = {
							id: 0,
							image: that.BestImgUrl + '/Certification/Group 34372.png',
							name: "未认证",
							ratio: 0,
							vip_level: 0
						}
					} else {
						res.data.result.forEach(function (item, index) {
							if(item.vip_level == myLeve){
								myLevelData = item
							}
						});
						that.MyLevelData = myLevelData
					}
					console.log('我的达人等级',that.MyLevelData)
				}).catch(err => {
							
				})
			},
			clickWeiRen(item,index){
				// uni.navigateTo({
				// 	url: '/subpackageA/pages/DouYin/DouYin?data=' + encodeURIComponent(JSON.stringify(item))
				// });
				console.log('1',item)
				let ptData = {
					label: item.platform_name,
					value: item.platform_type,
					screenshot_example: item.screenshot_example,
					url_example: item.url_example
				}
				uni.navigateTo({
					url: '/subpackageA/pages/Addapprove/Addapprove?data=' + encodeURIComponent(JSON.stringify(ptData)) + '&LaiYuan=' + this.LaiYuan
				})
			},
			clickWeiRenyrz(item,index){
				console.log('2',item)
				uni.navigateTo({
					url: '/subpackageA/pages/DouYin/DouYin?data=' + encodeURIComponent(JSON.stringify(item))// + '&LaiYuan=' + this.LaiYuan
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f2d6;
	}
	/deep/ .u-th {
		// background-color: #FFDFD4 !important;
		font-size: 24rpx !important;
		padding: 20rpx 0 !important;
		// color: #FF4910 !important;
	}
	
	/deep/ .u-tr {
		position: relative;
	}
	/deep/ .u-td {
		height: 31px;
	}
	.center_wrap {
		padding: 24rpx;
		.drjs_box {
			position: relative;
			padding: 20rpx;
			border: 1px solid transparent;
			border-radius: 24rpx;
			background-clip: padding-box, border-box;
			background-origin: padding-box, border-box;
			background-image: linear-gradient(to top, #ffffff, #F8F2D6), linear-gradient(to top, #ffffff, #F1B867);
			.drjs_title {
				width: 240rpx;
				height: 50rpx;
				margin: 10rpx auto 30rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.jsbiag {
				width: 100%;
				height: 50rpx;
				margin: 0 auto;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.jieshao {
				width: 90%;
				margin: 54rpx auto 36rpx;
				background-color: #FAEC9A;
				border-radius: 200rpx;
				position: relative;
				padding: 10rpx 0;
				image {
					width: 110rpx;
					height: 126rpx;
					position: absolute;
					left: -10rpx;
					top: -20rpx;
				}
				.jswa {
					padding-left: 110rpx;
					padding-right: 20rpx;
					text-align: left;
					color: #CC4900;
					font-size: 22rpx;
				}
			}
		}
	}
	.me-top-wrap {
		position: relative;
		overflow: hidden;
		.top-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 700rpx;
		}
		.my_info_wrap {
			position: relative;
			z-index: 2;
			.top-info-box {
				position: relative;
				
				/* #ifdef APP-PLUS || MP-WEIXIN */
				padding: 228rpx 0 20rpx 0;
				/* #endif */
				/* #ifdef H5 */
				padding: 124rpx 0 20rpx 0;
				/* #endif */
				
				.my-info {
					align-items: center;
					padding: 0 0 0 40rpx;
					.my-tx {
						border-radius: 200rpx;
						width: 136rpx;
						height: 136rpx;
						border: 2px solid #ffffff;
					}
					.my-name {
						padding-left: 20rpx;
						view:nth-child(1) {
							font-size: 36rpx;
							color: #000000;
							font-weight: bold;
						}
						view:nth-child(2) {
							color: $zzy-text-color-333333;
							font-size: 24rpx;
							align-items: center;
							text {
								margin-right: 10rpx;
							}
						}
					}
					.right-icon {
						margin-left: auto;
						image {
							width: 220rpx;
							height: 56rpx;
						}
					}
				}
			}
			.gongju_lan {
				margin-top: 20rpx;
				.order_gjl {
					border-radius: 30rpx 30rpx 0 0;
					padding: 0 26rpx;
					.order_gjl_box {
						background-color: #ffffff;
						padding: 24rpx;
						border-radius: 24rpx;
						.order_gjl_title {
							align-items: center;
							justify-content: space-between;
							view:nth-child(1){
								font-size: 32rpx;
								color: $zzy-text-color-333333;
								font-weight: bold;
							}
							view:nth-child(2){
								color: $zzy-text-color-999999;
								font-size: 24rpx;
							}
						}
						.gongju_menu {
							align-items: center;
							margin-top: 30rpx;
							.gongju_menu_item {
								text-align: center;
								width: 25%;
								image {
									width: 88rpx;
									height: 88rpx;
									margin-bottom: 12rpx;
								}
								view {
									color: $zzy-text-color-333333;
									font-size: 24rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
